<template>
  <el-drawer
    v-model="isDrawer"
    title="指标历史数据"
    :size="418"
    direction="rtl"
    :with-header="false"
    @open="handleOpen"
    @close="emit('close')"
  >
    <div class="box-historyDrawer">
      <div class="title">
        <span>指标历史数据</span>
      </div>
      <div class="hd-child">
        <div class="hd-child-info">
          <!-- <div class="btn" v-if="!isReadonly">
          <el-button type="primary">操 作</el-button>
        </div> -->
          <el-row>
            <el-col :span="24">
              <div class="desc"><span class="txt">所属板块：</span><span class="txt1">xxxxxxxxx</span></div>
            </el-col>
            <el-col :span="24">
              <div class="desc"><span class="txt">所属驾驶舱：</span><span class="txt1">xxxxxxxxx</span></div>
            </el-col>
          </el-row>
        </div>
        <div class="hd-child-timeline">
          <div class="timeLine">
            <el-timeline style="max-width: 600px">
              <el-timeline-item
                :color="index === 0 ? '#0C7CFF' : index === 1 ? '#52C41A' : index === 2 ? '#999999' : '#999999'"
                :hide-timestamp="false"
                v-for="(activity, index) in activities"
                :key="index"
                size="large"
                :hollow="true"
                timestamp=""
                class="timeline-t"
              >
                <div class="timeline-item">
                  <div class="timeline-item-child">
                    <span class="span-pad">修改类型：{{ activity.fieldName }}</span>
                    <span class="span-pad">
                      修改值：{{
                        activity.fieldName === "数据源" && activity.newValue === "1"
                          ? "填报"
                          : activity.fieldName === "数据源" && activity.newValue === "2"
                            ? "链接"
                            : activity.fieldName === "预警指标" && activity.newValue === "0"
                              ? "否"
                              : activity.fieldName === "预警指标" && activity.newValue === "1"
                                ? "是"
                                : activity.newValue
                      }}
                    </span>
                    <span>修改人：--</span>
                  </div>
                  <div class="timeline-item-child marginTop">
                    <span class="span-pad">审批人：{{ activity.approver || "--" }}</span>
                    <span>审核时间：{{ activity.approvedAt || "--" }}</span>
                  </div>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </div>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import { ref, computed } from "vue"
import { historicalRecords } from "../../../api/datamanage/fillreport"

const props = defineProps({
  isDrawer: {
    type: Boolean,
    default: false
  },
  id: {
    type: String,
    default: ""
  }
})

const emit = defineEmits(["update:isDrawer", "close"])

const isDrawer = computed({
  get: () => props.isDrawer,
  set: (val) => {
    emit("update:isDrawer", val)
  }
})

const activities = ref([])

async function handleOpen() {
  if (!props.id) return
  const { data } = await historicalRecords(props.id)
  activities.value = data
}
</script>
<style lang="scss" scoped>
.box-historyDrawer {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  box-sizing: border-box;
  .title {
    width: 100%;
    height: 24px;
    line-height: 24px;
    letter-spacing: 1px;
    margin-bottom: 10px;
    span {
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 600;
      font-size: 18px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .hd-child {
    width: 100%;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .hd-child-info {
      flex-shrink: 0;
      width: 100%;
      box-sizing: border-box;
    }
    .hd-child-timeline {
      flex: 1;
      width: 100%;
      min-height: 0;
      box-sizing: border-box;
    }
  }

  .btn {
    width: 100%;
    height: 40px;
    margin: 0 0 10px 0;
    .el-button {
      width: 100%;
      height: 40px;
      border-radius: 0;
      background-color: #0c7cff;
    }
  }
  .desc {
    width: 100%;
    height: 25px;
    .txt {
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 400;
      font-size: 14px;
      color: #666666;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    .txt1 {
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 600;
      font-size: 14px;
      color: #333333;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .timeLine {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden;
    overflow-y: auto;
    padding-top: 10px;
    box-sizing: border-box;

    .timeline-item {
      width: 100%;
      height: auto;
      padding: 2px 0 5px 0;
      .timeline-item-child {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 600;
        font-size: 14px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .span-pad {
        padding-right: 20px;
      }
      .marginTop {
        margin-top: 6px;
      }
    }
    .el-timeline {
      padding-left: 4px !important;
    }
    .timeline-t:nth-child(1) {
      .el-timeline-item__content {
        span {
          color: #0c7cff !important;
        }
      }
    }
    .timeline-t:nth-child(2) {
      .el-timeline-item__content {
        span {
          color: #333333 !important;
        }
      }
    }
    .timeline-t:nth-child(n + 3) {
      .el-timeline-item__content {
        span {
          color: #999999 !important;
        }
      }
    }
  }
}
</style>
